<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >

      <el-form-item label="库存类型" prop="insurance">
        <el-select v-model="queryParams.insurance" placeholder="请选择">
          <el-option
            v-for="item in [
              { value: '-1', label: '全部', key: '-1' },
              { value: '1', label: '保险柜', key: '1' },
              { value: '0', label: '赏袋', key: '0' },

            ]"
            :key="item.key"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置
        </el-button
        >
      </el-form-item>
      <el-tag type="success">
        当前位置库存数量为: {{ total }}
      </el-tag>
      ||
      <el-tag type="success">
        当前位置库存价值为: {{ totalPrice }}¥

      </el-tag>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-button
        type="danger"
        icon="el-icon-delete"
        size="mini"
        @click="handleDeleteBatch"
        :disabled="idsMap.length === 0"
      >批量删除（每次只删除同类物品中的一个）
      </el-button>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="listList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="赏品id" align="center" prop="id"/>
      <el-table-column label="赏品名称" align="center" prop="title"/>
      <el-table-column label="赏品封面图" align="center" prop="imgurl">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.imgurl"
            :preview-src-list="srcList"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="赏品回收价" align="center" prop="outPrice">
        <template slot-scope="scope">
          {{ scope.row.outPrice }}￥
        </template>
      </el-table-column>


      <el-table-column label="数量" align="center" prop="count"/>

      <el-table-column label="1保险柜" align="center" prop="insurance">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.insurance == 1">保险柜</el-tag>
          <el-tag type="danger" v-if="scope.row.insurance == 0">赏袋</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="获取该物品时间"
        align="center"
        prop="createTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
              scope.row.createTime
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listList,
  getList,
  delList,
  addList,
  updateList, delUserBagOrderList,
} from "@/api/order/order_list.js";

import {getMy_user_bag} from "@/api/users/user.js";

export default {
  name: "List",
  props: {
    ID: {
      type: String,
      default: 0,
    },
  },
  data() {
    return {
      idsMap: [],
      totalPrice: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单明细表格数据
      listList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        userId: this.ID,
        insurance: '-1',
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        orderNum: [
          {required: true, message: "订单号不能为空", trigger: "blur"},
        ],
        goodslistId: [
          {required: true, message: "赏品id不能为空", trigger: "blur"},
        ],
        imgurl: [
          {required: true, message: "赏品封面图不能为空", trigger: "blur"},
        ],
        price: [
          {required: true, message: "赏品价格不能为空", trigger: "blur"},
        ],
        title: [
          {required: true, message: "赏品名称不能为空", trigger: "blur"},
        ],
        num: [{required: true, message: "下单数量不能为空", trigger: "blur"}],
        status: [
          {
            required: true,
            message:
              "1 待选择发货 回收  2 待发货  3 已发货 4 已收货 5已回收不能为空",
            trigger: "blur",
          },
        ],
        addtime: [
          {required: true, message: "下单时间不能为空", trigger: "blur"},
        ],
        kjIs: [
          {
            required: true,
            message: "0其他 1普通抽奖 2first last w 最终不能为空",
            trigger: "blur",
          },
        ],
        jfKjIs: [
          {
            required: true,
            message: "0其他 1普通抽奖 2first last w 最终不能为空",
            trigger: "blur",
          },
        ],
        luckNo: [
          {required: true, message: "抽奖序号不能为空", trigger: "blur"},
        ],
        minType: [
          {required: true, message: "0否 1是保底不能为空", trigger: "change"},
        ],
        give: [
          {
            required: true,
            message: "0普通 1无限赏赠送不能为空",
            trigger: "blur",
          },
        ],
        insurance: [
          {required: true, message: "1保险柜不能为空", trigger: "blur"},
        ],
      },
    };
  },
  created() {
    console.log(this.ID);
    this.getList();
  },

  methods: {
    handleDeleteBatch() {
      if (this.idsMap.length === 0) {
        this.$message({
          message: "请选择要删除的项",
          type: "warning",
        });
        return;
      }

      this.$confirm("此操作将永久删除所选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.idsMap.forEach((item) => {
          delUserBagOrderList(item.id, item.source);
        });
        //等待删除完成后刷新页面
        setTimeout(() => {
          this.getList();
        }, 1000);
        this.$message({
          message: "删除成功",
          type: "success",
        });
      }).catch(() => {
        this.$message({
          message: "已取消删除",
          type: "info",
        });
      });
    },

  // 多选框选中数据
  handleSelectionChange(selection) {
    this.idsMap = selection.map((item) => {
      return {id: item.id, source: item.source};
    });
    this.single = selection.length !== 1;
    this.multiple = !selection.length;
  },
  handleDelete(index, row) {
    this.$confirm("此操作将永久删除该玩家背包物品(若有多件物品，每次只能删除一件)是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    ).then(() => {
      delUserBagOrderList(row.id, row.source).then((response) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getList();
      });
    }).catch(() => {
      this.$message({
        message: "已取消删除",
        type: "info",
      });

    });
  },
  /** 查询订单明细列表 */
  getList() {
    this.loading = true;
    console.log(this.queryParams);
    getMy_user_bag(this.queryParams).then((response) => {
      this.listList = response.data.list;
      this.total = response.data.count;
      this.totalPrice = response.data.totalPrice;
      this.loading = false;
    });
  }
  ,
  // 取消按钮
  cancel() {
    this.open = false;
    this.reset();
  }
  ,
  // 表单重置
  reset() {
    this.form = {
      id: null,
      userId: null,
      orderNum: null,
      payNum: null,
      orderId: null,
      goodslistId: null,
      imgurl: null,
      price: null,
      title: null,
      num: null,
      outPrice: null,
      status: 0,
      addtime: null,
      name: null,
      mobile: null,
      province: null,
      city: null,
      county: null,
      address: null,
      courierNumber: null,
      courierName: null,
      endTime: null,
      sendNum: null,
      message: null,
      isSale: null,
      saleTime: null,
      goodsId: null,
      orderType: null,
      kjIs: null,
      jfKjIs: null,
      luckNo: null,
      minType: null,
      give: null,
      insurance: null,
      creator: null,
      createDate: null,
    };
    this.resetForm("form");
  }
  ,

  /** 搜索按钮操作 */
  handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
  }
  ,
  /** 重置按钮操作 */
  resetQuery() {
    this.resetForm("queryForm");
    this.handleQuery();
  }
  ,

}
,
}
;
</script>
